<template>
	<view class="e-detail">
		<view class="info-content">
			<image :src="'/static/icons/primary.png'" style="width: 30rpx;height: 30rpx;margin: 0 20rpx;"></image>
			<text>距离规定检测日期还剩{{form[`testDay`]||0}}天</text>
		</view>
		<equip-detail :form="form" :status="type == 'getOmList'?'待检测':'送检中'"></equip-detail>
		<view class="bg-fff p-x-30 p-t-30 br-10 m-b-30">
			<u-row customStyle="padding-bottom: 20px">
				<u-col v-for=" (item, index) in list" :span="item.span||'4'" :key="item.name">
					<view class="m-b-20">{{item.name}}</view>
					<view class="text-e">
						{{form[item.key] || '--'}}
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="bg-fff p-30 br-10 m-b-30">
			<store-table :titleList="titleList1" :dataList="dataList1"></store-table>
		</view>
		<u-gap height="60"></u-gap>
		<view class="window-bottom">
			<u-button type="primary" text="去补充信息" @click="onSubmit"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		titleList1,
		dataList1,
	} from '../home/detailData.js'
	import {
		baseUrl
	} from '@/request/request.js'
	export default {
		data() {
			return {
				type: '',
				id: '',
				checkId: '',
				titleList1: titleList1,
				dataList1: [],
				list: [{
						name: '检测周期',
						key: 'testPeriod',
					},
					{
						span: '5',
						name: '上次检测日期',
						key: 'testDateLitter',
					},
					{
						span: '3',
						name: '报告到期日期',
						key: 'nextTestDateLitter',
					},
				],
				form: {
					id: ''
				},
				info: {},
			}
		},
		onLoad(option) {
			this.id = option.id
			this.type = option.code
			this.checkId = option.checkId
			this.getUserInfo()
		},
		onShow() {
			this.getDeviceDetailList()
		},
		onPullDownRefresh() {
			this.getDeviceDetailList()
			uni.stopPullDownRefresh()
		},
		methods: {
			// 获取设备详情
			async getDeviceDetailList() {
				const list = [
					'testDate',
					'nextTestDate',
				]
				const res = await this.$api.getDeviceDetailList(this.id)
				this.form = res.data
				list.forEach(item => {
					if (this.form[item]) {
						this.form[`${item}Litter`] = this.form[item].split(' ')[0]
					} else {
						this.form[`${item}Litter`] = null
					}
				})
				this.getTest()
			},
			getTest() {
				this.dataList1 = this.form.testDTOList.map(item => {
					let obj = JSON.parse(JSON.stringify(dataList1[0]))
					obj.list = obj.list.map(data => {
						data.value = item[data.key]
						return data
					})
					obj.content = obj.content.map(data => {
						data.value = item[data.key]
						return data
					})
					obj.fileList = item.testFiles.map(data => {
						return {
							url: baseUrl + data.uploadName
						}
					})
					return obj
				})
			},
			// 获取登录用户详情
			getUserInfo() {
				const info = uni.getStorageSync('userInfo');
				if (info) {
					this.info = JSON.parse(info)
				}
			},
			// 提交
			async onSubmit() {
				let url = `/pages/check/form?instrumentsId=${this.id}&code=${this.type}`
				if (this.checkId) {
					url = `/pages/check/form?instrumentsId=${this.id}&code=${this.code}&checkId=${this.checkId}`
				}
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.e-detail {
		padding: 30rpx;
		background: linear-gradient(#0e64fe, #F7F8FA); //从上到下
		height: 200px;

		.title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
		}

		.u-col {
			view:first-child {
				font-size: 24rpx;
				font-weight: 400;
				color: #59606A;
			}

			view:last-child {
				font-size: 26rpx;
				font-weight: 400;
				color: #333333;
			}
		}
	}

	.btn {
		font-size: 16rpx;
		background: #3166F8;
		border-radius: 5rpx;
		color: #fff;
		padding: 0 8rpx;
	}

	.info-content {
		font-size: 30rpx;
		line-height: 80rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-bottom: 30rpx;
		color: #3166F8;
	}

	.wrong {
		font-size: 24rpx;
		background-color: rgba(217, 26, 26, 0.1);
		color: #0e64fe;
		padding: 10rpx;
		border-radius: 5rpx;
	}

	.check-num {
		font-size: 22rpx;
		color: #666666;
		line-height: 36rpx;
		background: #F7F9FC;
		border-radius: 5rpx;
		padding: 20rpx 10rpx;
	}
</style>